<template>
  <div>
    <el-table :data="merchants" @expand-change="getCensus">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="交易总额">
            <span>{{ props.row.allMoney }}</span>
          </el-form-item>
          <el-form-item label="订单总数">
            <span>{{ props.row.orderCount }}</span>
          </el-form-item>
          <el-form-item label="车检总数">
            <span>{{ props.row.allCars }}</span>
          </el-form-item>
          <el-form-item label="商务经理">
            <span>{{ props.row.serveName }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
      <el-table-column prop="storeName" label="商家名称"></el-table-column>
      <el-table-column prop="storePhone" label="商家电话"></el-table-column>
      <el-table-column prop="storeLogo" label="商家logo">
        <template v-slot="scope">
          <el-image :src="scope.row.storeLogo" style="width:50px;height:50px;" :preview-src-list="[scope.row.storeLogo]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="storeType" label="商家类型">
        <template v-slot="scope">
          <el-tag v-if="scope.row.storeType==1">汽车4s店</el-tag>
          <el-tag v-if="scope.row.storeType==2">汽车修理厂</el-tag>
          <el-tag v-if="scope.row.storeType==3">汽车美容店</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="masterName" label="负责人名称"></el-table-column>
      <el-table-column prop="masterPhone" label="负责人电话"></el-table-column>
      <!--<el-table-column prop="frontDoor" label="商家门头">
        <template v-slot="scope">
          <el-image :src="scope.row.frontDoor" style="width:50px;height:50px;"></el-image>
        </template>
      </el-table-column>-->
      <el-table-column prop="address" label="商家地址"></el-table-column>

      <!--<el-table-column prop="bizLicense" label="营业执照">
        <template v-slot="scope">
          <el-image :src="scope.row.bizLicense" style="width:50px;height:50px;"></el-image>
        </template>
      </el-table-column>-->

      <!-- <el-table-column prop="createDate" label="申请时间"></el-table-column> -->
      <el-table-column prop label="操作">
        <template v-slot="scope">
          <el-button size="mini" type="primary" @click="getDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="商家详情" :visible.sync="centerDialogVisible" center>
      <el-descriptions :border="true">
        <el-descriptions-item label="商家名称">{{newObj.storeName}}</el-descriptions-item>
        <el-descriptions-item label="商家类型">
          <el-tag v-if="newObj.storeType==1">汽车4s店</el-tag>
          <el-tag v-if="newObj.storeType==2">汽车修理厂</el-tag>
          <el-tag v-if="newObj.storeType==3">汽车美容店</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="商家logo">
          <el-image :src="newObj.storeLogo" style="width:50px;" fit="scale-down" :preview-src-list="[newObj.storeLogo]"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="商家地址">{{newObj.province}}{{newObj.city}}{{newObj.town}}{{newObj.address}}</el-descriptions-item>
        <el-descriptions-item label="商家电话">{{newObj.storePhone}}</el-descriptions-item>
        <el-descriptions-item label="商家门头">
          <el-image  v-for="(item,index) in newObj.frontDoor" :key="index" :src="item" style="width:100px;" fit="scale-down" lazy :preview-src-list="newObj.frontDoor"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="营业执照">
          <el-image  v-for="(item,index) in newObj.bizLicense" :key="index" :src="item" style="width:100px;" fit="scale-down" lazy :preview-src-list="newObj.bizLicense"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="负责人姓名">{{newObj.masterName}}</el-descriptions-item>
        <el-descriptions-item label="负责人电话">{{newObj.masterPhone}}</el-descriptions-item>
        <el-descriptions-item label="商务经理">{{newObj.serveName}}</el-descriptions-item>
        <el-descriptions-item label="商务电话">{{newObj.servePhone}}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{newObj.createDate}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>
<script>
export default {
  inject: ["reload"],
  data: function() {
    return {
      merchants: [],
      total:0,
      centerDialogVisible: false,
      newObj:{},
    };
  },
  async created() {
    this.handleCurrentChange(1);    
  },
  methods: {
    handleCurrentChange:async function(val){
      const {data} = await this.$http.get(`/merchant/getMerchants?pageNum=${val}&pageSize=10`);
  
      if (data.code==1) {
        this.merchants=[];
        data.object.list.forEach(merchant=>{
          merchant.allMoney=0;
          this.merchants.push(merchant);
        })      

        this.total = data.object.total;
      }else{
        this.$message({
            message:data.message,
            type: 'error'
          });
      }
    },
    getDetail: async function(obj) {
      this.newObj = obj;
      this.centerDialogVisible = true;
    },
    getCensus:async function(row){
      console.log(row,1111)
      if(!row.allMoney){
        const {data} = await this.$http.get(`/order/censusOrder?merchantId=${row.id}`);
        if (data.code==1) {
          for(let i in this.merchants){
            if(this.merchants[i].id==row.id){
              for (const key in data.object) {
                this.merchants[i][key] = data.object[key];
              }
            }
          }
        }else{
          this.$message({
              message:data.message,
              type: 'error'
            });
        }
      }
    }
  }
};
</script>
<style>
  .el-form-item.show-pic .el-image{
    margin:0 10px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>